<template>
  <div>
    <input type="file" @change="onFileSelected">
    <p>{{ wenxinResponse }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      wenxinResponse: '',
      base64Image: ''
    }
  },
  mounted() {
    this.getWenxinResponse()
  },
  methods: {
    onFileSelected(event) {
      const file = event.target.files[0]
      const reader = new FileReader()

      reader.onload = e => {
        this.base64Image = e.target.result
        this.getOCRResponse()
      }

      reader.readAsDataURL(file)
    },
    /**
     * 异步获取 OCR（光学字符识别）API 响应
     * 此函数通过 Access Token 获取 OCR 服务的响应，并将识别的文本存储在组件状态中
     */
    async getOCRResponse() {
      try {
        // 从环境变量中获取 OCR API 的客户端 ID 和密钥
        const ocrClientId = process.env.VUE_APP_OCR_CLIENT_ID
        const ocrClientSecret = process.env.VUE_APP_OCR_CLIENT_SECRET
        // 通过代理服务器获取 Access Token
        const tokenResponse = await axios.get(
          '/api/oauth/2.0/token' +
            `?grant_type=client_credentials&client_id=${ocrClientId}&client_secret=${ocrClientSecret}`
        )
        // 从响应中提取 Access Token
        const accessToken = tokenResponse.data.access_token
        // 如果未成功获取 Access Token，则输出错误信息并终止执行
        if (!accessToken) {
          console.error('Access Token 获取失败')
          return
        }
        // 设置请求 OCR API 的 headers
        const headers = {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
        // 使用 Access Token 请求 OCR 服务
        const ocrResponse = await axios.post(
          '/api/rest/2.0/ocr/v1/webimage' + `?access_token=${accessToken}`,
          {
            image: this.base64Image
          },
          { headers }
        )

        // 如果 OCR API 响应状态为 200（成功），则处理响应数据
        if (ocrResponse.status === 200) {
          // 将 OCR 识别的每个单词的文本提取出来，并拼接成单一字符串
          this.wenxinResponse = ocrResponse.data.words_result.map(item => item.words).join('')
        }
      } catch (error) {
        // 如果在获取 OCR API 响应过程中发生错误，则输出错误信息
        console.error('获取 OCR API 响应失败:', error)
      }
    },
    async getWenxinResponse() {
      try {
        // 从 Vue 配置文件中获取 client_id 和 client_secret
        const qianfanClientId = process.env.VUE_APP_QIANFAN_CLIENT_ID
        const qianfanClientSecret = process.env.VUE_APP_QIANFAN_CLIENT_SECRET

        // 通过代理服务器获取 Access Token
        const tokenResponse = await axios.get(
          '/api/oauth/2.0/token' +
            `?grant_type=client_credentials&client_id=${qianfanClientId}&client_secret=${qianfanClientSecret}`
        )
        const accessToken = tokenResponse.data.access_token

        if (accessToken) {
          // 通过代理服务器调用文心一言 API
          const wenxinResponse = await axios.post(
            '/api/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/completions' + `?access_token=${accessToken}`,
            {
              model: 'ERNIE-Speed-8K',
              messages: [
                {
                  role: 'user',
                  content: '今天天气真好'
                }
              ],
              response_format: 'text',
              temperature: 0.8,
              system: '请将这句话翻译成英文',
              stream: false
            }
          )

          if (wenxinResponse.status === 200) {
            this.wenxinResponse = wenxinResponse.data.result
          } else {
            console.error('调用文心一言API失败:', wenxinResponse.status, wenxinResponse.data)
          }
        } else {
          console.error('Access Token 获取失败')
        }
      } catch (error) {
        console.error('获取 Access Token 或调用文心一言 API 发生错误:', error)
      }
    }
  }
}
</script>
